<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                 <h1 class="title ui-widget-header ui-corner-all ">Quản Lý Ảnh</h1>
                <p:messages id="messages" autoUpdate="true" closable="true" showDetail="true"/>
                <!-- Insert -->
                <h:form id="insertForm">
                    <h:panelGrid columns="2" styleClass="my-panel-grid">
                        
                        <h:outputLabel for="phone" value="Sản phẩm:"/>
                        <p:selectOneMenu id="phone" value="#{phoneController.selectedPhone.id}" style="margin: 5px">
                            <f:selectItem itemValue="#{null}" itemLabel="Chọn sản phẩm"/>
                            <f:selectItems value="#{phoneController.phoneList}" var="phoneList"
                                           itemValue="#{phoneList.id}" itemLabel="#{phoneList.name}"/>
                            <p:ajax update="color, image360Form, imageSlideForm, imageFuncForm, imageKitForm, imageSpecForm, imageGalleryForm"/>
                        </p:selectOneMenu>

                        <h:outputLabel for="color" value="Màu:"/>
                        <p:selectOneMenu id="color" value="#{phoneController.selectedColor.id}" style="margin: 5px">
                            <f:selectItem itemValue="#{null}" itemLabel="Chọn màu"/>
                            <f:selectItems value="#{phoneController.phoneCodeList}" var="phoneCodeList"
                                           itemValue="#{phoneCodeList.color.id}" itemLabel="#{phoneCodeList.color.name}"/>
                            <p:ajax update="imageGalleryForm"/>
                        </p:selectOneMenu>
                        
                        <h:outputLabel value="Slide 360:"/>
                        <h:panelGrid columns="1">
                            <p:fileUpload fileUploadListener="#{phoneController.handleFileUpload360}" mode="advanced" dragDropSupport="false" update=":insertForm:image360Form"
                                          multiple="true" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                            <p:dataTable style="text-align: center" id="image360Form" var="image" value="#{phoneController.image360List}" paginator="true" rows="5" paginatorPosition="bottom"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15"
                                         emptyMessage="Không có hình ảnh">
                               <!-- Id -->
                               <p:column headerText="Id">
                                   <h:outputText value="#{image.id}"/>
                               </p:column>
                               <!-- Name -->
                               <p:column headerText="Đường dẫn">
                                    <h:outputText value="#{image.link}"/>
                               </p:column>
                               
                               <!-- Actions -->
                               <p:column>
                                   <p:commandButton id="btnViewImage" update=":viewImageForm" oncomplete="PF('viewImageDialog').show()" icon="ui-icon" title="Xem">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                                   <p:commandButton id="btnDeleteImage" update=":deleteImageForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                               </p:column>
                           </p:dataTable>
                        </h:panelGrid>

                        <h:outputLabel value="Slide:"/>
                        <h:panelGrid columns="1">
                            <p:fileUpload fileUploadListener="#{phoneController.handleFileUploadSlide}" mode="advanced" dragDropSupport="false" update=":insertForm:imageSlideForm"
                                          multiple="true" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                            <p:dataTable style="text-align: center" id="imageSlideForm" var="image" value="#{phoneController.imageSlideList}" paginator="true" rows="5" paginatorPosition="bottom"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15"
                                         emptyMessage="Không có hình ảnh">
                               <!-- Id -->
                               <p:column headerText="Id">
                                   <h:outputText value="#{image.id}"/>
                               </p:column>
                               <!-- Name -->
                               <p:column headerText="Đường dẫn">
                                    <h:outputText value="#{image.link}"/>
                               </p:column>
                               
                               <!-- Actions -->
                               <p:column>
                                   <p:commandButton id="btnViewImage" update=":viewImageForm" oncomplete="PF('viewImageDialog').show()" icon="ui-icon" title="Xem">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                                   <p:commandButton id="btnDeleteImage" update=":deleteImageForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                               </p:column>
                           </p:dataTable>
                        </h:panelGrid>

                        <h:outputLabel value="Ảnh chức năng:"/>
                        <h:panelGrid>
                            <p:fileUpload fileUploadListener="#{phoneController.handleFileUploadFunc}" mode="advanced" dragDropSupport="false" update=":insertForm:imageFuncForm"
                                          multiple="false" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                            <p:dataTable style="text-align: center" id="imageFuncForm" var="image" value="#{phoneController.imageFuncList}" 
                                         emptyMessage="Không có hình ảnh">
                               <!-- Id -->
                               <p:column headerText="Id">
                                   <h:outputText value="#{image.id}"/>
                               </p:column>
                               <!-- Name -->
                               <p:column headerText="Đường dẫn">
                                    <h:outputText value="#{image.link}"/>
                               </p:column>
                               
                               <!-- Actions -->
                               <p:column>
                                   <p:commandButton id="btnViewImage" update=":viewImageForm" oncomplete="PF('viewImageDialog').show()" icon="ui-icon" title="Xem">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                                   <p:commandButton id="btnDeleteImage" update=":deleteImageForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                               </p:column>
                           </p:dataTable>
                        </h:panelGrid>

                        <h:outputLabel value="Ảnh KIT:"/>
                        <h:panelGrid>
                        <p:fileUpload fileUploadListener="#{phoneController.handleFileUploadKit}" mode="advanced" dragDropSupport="false" update=":insertForm:imageKitForm"
                                      multiple="false" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                        <p:dataTable style="text-align: center" id="imageKitForm" var="image" value="#{phoneController.imageKitList}" 
                                         emptyMessage="Không có hình ảnh">
                               <!-- Id -->
                               <p:column headerText="Id">
                                   <h:outputText value="#{image.id}"/>
                               </p:column>
                               <!-- Name -->
                               <p:column headerText="Đường dẫn">
                                    <h:outputText value="#{image.link}"/>
                               </p:column>
                               
                               <!-- Actions -->
                               <p:column>
                                   <p:commandButton id="btnViewImage" update=":viewImageForm" oncomplete="PF('viewImageDialog').show()" icon="ui-icon" title="Xem">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                                   <p:commandButton id="btnDeleteImage" update=":deleteImageForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                               </p:column>
                           </p:dataTable>
                        </h:panelGrid>

                        <h:outputLabel value="Ảnh đặc tả:"/>
                        <h:panelGrid>
                        <p:fileUpload fileUploadListener="#{phoneController.handleFileUploadSpec}" mode="advanced" dragDropSupport="false" update=":insertForm:imageSpecForm"
                                      multiple="false" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                        <p:dataTable style="text-align: center" id="imageSpecForm" var="image" value="#{phoneController.imageSpecList}" 
                                         emptyMessage="Không có hình ảnh">
                               <!-- Id -->
                               <p:column headerText="Id">
                                   <h:outputText value="#{image.id}"/>
                               </p:column>
                               <!-- Name -->
                               <p:column headerText="Đường dẫn">
                                    <h:outputText value="#{image.link}"/>
                               </p:column>
                               
                               <!-- Actions -->
                               <p:column>
                                   <p:commandButton id="btnViewImage" update=":viewImageForm" oncomplete="PF('viewImageDialog').show()" icon="ui-icon" title="Xem">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                                   <p:commandButton id="btnDeleteImage" update=":deleteImageForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                               </p:column>
                           </p:dataTable>
                        </h:panelGrid>
                        
                        <h:outputLabel value="Ảnh màu:"/>
                        <h:panelGrid>
                        <p:fileUpload fileUploadListener="#{phoneController.handleFileUploadGallery}" mode="advanced" dragDropSupport="false" update=":insertForm:imageGalleryForm"
                                      multiple="true" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                        <p:dataTable style="text-align: center" id="imageGalleryForm" var="image" value="#{phoneController.imageGalleryList}" paginator="true" rows="5" paginatorPosition="bottom"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15"
                                         emptyMessage="Không có hình ảnh">
                               <!-- Id -->
                               <p:column headerText="Id">
                                   <h:outputText value="#{image.id}"/>
                               </p:column>
                               <!-- Name -->
                               <p:column headerText="Đường dẫn">
                                    <h:outputText value="#{image.link}"/>
                               </p:column>
                               
                               <!-- Actions -->
                               <p:column>
                                   <p:commandButton id="btnViewImage" update=":viewImageForm" oncomplete="PF('viewImageDialog').show()" icon="ui-icon" title="Xem">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                                   <p:commandButton id="btnDeleteImage" update=":deleteImageForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                       <f:setPropertyActionListener value="#{image}" target="#{phoneController.selectedImage}"/>
                                   </p:commandButton>
                               </p:column>
                           </p:dataTable>
                        </h:panelGrid>
                        
                    </h:panelGrid>
                    
                </h:form>
                
                <h:form id="viewImageForm">
                    <p:dialog header="Xem" widgetVar="viewImageDialog" resizable="false" showEffect="fade" hideEffect="fade" modal="true" width="900px" height="610px">
                        <p:graphicImage value="#{phoneController.selectedImage.link}"/>
                        
                    </p:dialog>
                </h:form>
                <!-- Delete image form -->
                <h:form id="deleteImageForm">
                    <p:confirmDialog closable="false" showEffect="fade" hideEffect="fade" severity="alert" widgetVar="confirmation"
                                     message="Xóa hình?" header="Xóa hình" style="margin:5px auto;">
                        <h:panelGroup layout="block" style="text-align: right">
                            <p:commandButton value="Đồng ý" action="#{phoneController.deleteImage()}" oncomplete="confirmation.hide();" update=":insertForm, :messages" />
                            <p:commandButton value="Hủy bỏ" oncomplete="confirmation.hide();" />
                        </h:panelGroup>
                    </p:confirmDialog>
                </h:form>
                
                
            </ui:define>
        </ui:composition>
    </h:body>
</html>